<template>
  <div id="communityDoctor" class="person-detail">
    <div>
      <van-nav-bar title="社区医生" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div class="communityDoctor-body">
      <div class="skillsTraining-search">
        <van-search placeholder="请输入搜索关键词" v-model="value" @input.native="selectInput()" />
      </div>
      <div class="communityDoctor-grid">
        <p v-for="(item, index) in diseaseList" :key="index" @click="selectGrid(item)"
          :class="{ red: item.checkSelect }" class="communityDoctor-details">
          {{ item.name }}
        </p>
      </div>
      <div>
        <p class="skillTrainingDetails-name">医生介绍</p>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="(item, index) in doctorList" :key="index" class="communityDoctor-doctor">
              <div>
                <van-image :src="item.headImage" alt="" round width="2rem" height="2rem" />
              </div>
              <div>
                <p class="skillTraining-name">{{ item.doctorName }}</p>
                <p>{{ item.deparment }}</p>
                <p>{{ item.description }}</p>
                <p>坐诊时间:{{item.sitTime}}</p>
                <p class="shadow-span">
                  <span v-for="(item1,index1) in item.speciality.split(',')" :key="item1+index1">{{ item1 }}</span>
                </p>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "communityDoctor",
    components: {},
    data() {
      return {
        value: "",
        loading: false,
        finished: false,
        isLoading: false,
        count: 1,
        doctorList: [],
        select: "",
        diseaseList: []
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getDepts()
    },
    methods: {
      onLoad() {
        this.getDoctorInfo();
      },
      selectGrid(item) {
        this.doctorList = []
        this.count = 1
        item.checkSelect = !item.checkSelect;
        let select = [];
        this.diseaseList.forEach(item => {
          if (item.checkSelect) {
            select.push(item.name);
          }
        });
        this.select = select.toString();
        this.getDoctorInfo();
      },
      selectInput() {
        let select = [];
        this.doctorList = []
        this.count = 1
        this.diseaseList.forEach(item => {
          if (item.checkSelect) {
            select.push(item.name);
          }
        });
        this.select = select.toString();
        this.getDoctorInfo();
      },
      onRefresh() {
        this.doctorList = []
        this.count = 1
        this.getDoctorInfo();
      },
      getDepts() {
        mine.doctor_v1_doctorDepts().then(res => {
          if (res.code == '0') {
            if (res.datas != null) {
              let arr = []
              res.datas.forEach(item => {
                let obj = {
                  name: item,
                  checkSelect: false
                }
                arr.push(obj)
              })
              this.diseaseList = arr
            }
          }
        })
      },
      getDoctorInfo() {
        let data = {
          curPage: this.count,
          deparment: this.select,
          doctorName: this.value,
          pageSize: (this.count) * 10
        };
        mine.doctor_v1_search(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.doctorList = [...this.doctorList, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count) * 10) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss">
  #communityDoctor {
    padding: 0 20px;

    .van-grid,
    .van-search {
      padding-left: 0 !important;
    }

    p {
      margin: 5px 0;
    }

    background: #fff;

    .communityDoctor-grid {
      display: flex;
      flex-wrap: wrap;
      padding-left: -5px;
    }

    .communityDoctor-details {
      padding: 5px;
      width: 18%;
      text-align: center;
      border: 0.5px solid #e2e2e2;
      margin-left: 10px;
    }

    .red {
      background: #dc4630;
      border-color: #dc4630;
      color: #fff;
    }

    .skillTrainingDetails-name {
      font-weight: bold;
      font-size: 16px;
      padding: 10px 0;
    }

    .communityDoctor-doctor {
      display: flex;
      border-bottom: 1px solid #e2e2e2;
      padding: 10px 0;

      >div:nth-child(2) {
        margin-left: 10px;
      }
    }

    .skillTraining-name {
      font-size: 16px;
      font-weight: 600;
    }

  }
</style>